<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息通知</title>
    <link rel="icon" th:href="@{/img/icon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<div class="ok-body">
			<blockquote class="layui-elem-quote">
				<p>layNotify 新一代Web弹窗组件。</p>
			</blockquote>
			<pre>
			// Step1. 引入依赖
			let layNotify = layui.layNotify;.

			<br/>
			// Step2. 使用
			layNotify.notice({
			    title: "消息提示",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			layNotify.notice({
			    title: "成功提示",
			    type: "success",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			layNotify.notice({
			    title: "警告提示",
			    type: "warning",
			    message: "我是消息提示消息提示消息提示消息提示"
			});

			layNotify.notice({
			    title: "错误提示",
			    type: "error",
			    message: "我是消息提示消息提示消息提示消息提示"
			});
		</pre>
			<button type="button" class="layui-btn" id="notice">消息提示</button>
			<button type="button" class="layui-btn" id="notice2">成功提示</button>
			<button type="button" class="layui-btn" id="notice3">警告提示</button>
			<button type="button" class="layui-btn" id="notice4">错误提示</button>
		</div>
	</div>
</div>

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["code", "layNotify"], function () {
        let code = layui.code;
        let layNotify = layui.layNotify;
        let $ = layui.jquery;

        code({
			elem: "pre",
			title: "代码示例",
			about: false
        });

        $("#notice").click(function () {
            layNotify.notice({
                title: "消息提示",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice2").click(function () {
            layNotify.notice({
                title: "成功提示",
                type: "success",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice3").click(function () {
            layNotify.notice({
                title: "警告提示",
                type: "warning",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });

        $("#notice4").click(function () {
            layNotify.notice({
                title: "错误提示",
                type: "error",
                message: "我是消息提示消息提示消息提示消息提示"
            });
        });
    });
</script>
</body>
</html>
